<template>
	<div class="searchJobOrder">
		<form class="mui-input-group">
			<div class="mui-input-row">
				<label>派工单号：</label>
				<input type="text" class="mui-input-clear" placeholder="请输入派工单编号">
			</div>
			<div class="mui-input-row">
				<label>起始时间：</label>
				<input type="text" class="mui-input-clear" placeholder="请输入起始时间">
			</div>
			<div class="mui-input-row">
				<label>终止时间：</label>
				<input type="text" class="mui-input-clear" placeholder="请输入终止时间">
			</div>
			<div class="mui-input-row">
				<label>终止时间：</label>
				<input type="text" class="mui-input-clear" placeholder="请输入终止时间">
			</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<span class="span1">
						状<span style="margin-right: 32px;"></span>态：
						<span @click="dialogVisible = true">
							<span style="margin-left: 42px;">{{label}}</span>
							<span style="margin-left: 20px;" class="el-icon-arrow-down"></span>
						</span>
					</span>
					<el-button type="primary">确定</el-button>
				</li>
			</ul>
			<el-dialog :visible.sync="dialogVisible" width="90%">
				<mt-radio @change='check' align="right" v-model="value" :options="options"></mt-radio>
			</el-dialog>
		</form>
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p class="num">
						<span>派工编号</span>
						<span class="numValue">JOB201798921000213</span>
					</p>
					<p>
						<span style="letter-spacing: 2em;">工序</span>
						<span>CNC</span>
					</p>
					<p>
						<span style="letter-spacing: 2em;">产品</span>
						<span>02</span>
					</p>
					<p>
						<span style="letter-spacing: 2em;">数量</span>
						<span>280</span>
					</p>
					<p>
						<span>计划开始时间</span>
						<span>2018-03-21 00:00:00</span>
					</p>
					<p>
						<span>计划结束时间</span>
						<span>2019-03-21 00:00:00</span>
					</p>
					<p>
						<span style="letter-spacing: 2em;">状态</span>
						<span>已完成</span>
					</p>
					<p>
						<span style="letter-spacing: 2em;">备注</span>
						<span></span>
					</p>
					<p>
						<span>派工时间</span>
						<span>2018-03-21 00:00:00</span>
					</p>
				</div>
			</div>
		</div>
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p class="num">
						<span>派工编号</span>
						<span class="numValue">JOB201798921000213</span>
					</p>
					<p>
						<span style="letter-spacing: 2em;">工序</span>
						<span>CNC</span>
					</p>
					<p>
						<span style="letter-spacing: 2em;">产品</span>
						<span>02</span>
					</p>
					<p>
						<span style="letter-spacing: 2em;">数量</span>
						<span>280</span>
					</p>
					<p>
						<span>计划开始时间</span>
						<span>2018-03-21 00:00:00</span>
					</p>
					<p>
						<span>计划结束时间</span>
						<span>2019-03-21 00:00:00</span>
					</p>
					<p>
						<span style="letter-spacing: 2em;">状态</span>
						<span>已开始</span>
					</p>
					<p>
						<span style="letter-spacing: 2em;">备注</span>
						<span></span>
					</p>
					<p>
						<span>派工时间</span>
						<span>2018-03-21 00:00:00</span>
					</p>
					<p id="toFinish" @click="toFinish" ref='finish'>
						<span>指定完成</span>
					</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		MessageBox
	} from 'mint-ui';
	export default {
		data() {
			return {
				dialogVisible: false,
				value: '0',
				options: [{
						label: '全部',
						value: '0'
					},
					{
						label: '已完成',
						value: '1'
					},
					{
						label: '进行中',
						value: '2'
					},
					{
						label: '未开始',
						value: '3'
					}
				],
				label: '全部'
			}
		},
		methods: {
			toFinish() {
				MessageBox.confirm('确定执行此操作?')
					.then(action => {
						MessageBox('执行成功','   ');
					})
			},
			check() {
				if (this.value === '0') {
					this.label = '全部'
				} else if (this.value === '1') {
					this.label = '已完成'
				} else if (this.value === '2') {
					this.label = '进行中'
				} else if (this.label === '3') {
					this.label = '未开始'
				}
				this.dialogVisible = false
			}
		}
	}
</script>

<style scoped="scoped">
	.span1{
		display: inline-block;
		margin-top: 10px;
	}
	.mui-input-group .mui-input-row{
		height: 50px;
		padding-top: 9px;
	}
	.el-button--primary{
		padding-top: 9px;
		padding-bottom: 9px;
	}
	.mint-msgbox-title{
		padding-top: 20px;
		padding-bottom: 35px;
	}
	.mint-msgbox-btn{
		border-top: 1px solid #DDDDDD;
	}
	#toFinish {
		color: red;
		padding-top: 15px;
		border-top: 1px solid #EEEEEE;
		display: flex;
		justify-content: center;
		font-size: 15px;
	}

	.mui-card {
		box-shadow: 0px 6px 8px #cdcdcd;
		margin-bottom: 17px;
	}

	.mui-card p {
		display: flex;
		justify-content: space-between;
	}

	.mui-card .num {
		font-size: 16px;
		padding-bottom: 20px;
		border-bottom: 1px solid #EEEEEE;
	}

	.numValue {
		font-size: 18px;
		color: #2C3E50;
		font-weight: bold;
	}
	.mint-msgbox{
		width: 71%;
	}
</style>
